<template>
	<a-spin :spinning="confirmLoading">
		<a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
			<a-row>
				<a-col :span="24">
					<a-form-item label="文本" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.name">
						<a-input v-model:value="formState.name" placeholder="请输入文本"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.miMa">
						<a-input-password v-model:value="formState.miMa" placeholder="请输入密码" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="字典下拉" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.xiala">
						<JDictSelectTag type="select" v-model:value="formState.xiala" dictCode="sex"
							placeholder="请选择字典下拉" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="字典单选" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.danxuan">
						<JDictSelectTag type="radio" v-model:value="formState.danxuan" dictCode="sex"
							placeholder="请选择字典单选" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="字典多选" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.duoxuan">
						<JCheckbox v-model:value="formState.duoxuan" dictCode="urgent_level" placeholder="请选择字典多选" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="开关" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.kaiguan">
						<JSwitch v-model:value="formState.kaiguan" :options="['1', '0']"></JSwitch>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.riqi">
						<a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
							v-model:value="formState.riqi" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="年月日时分秒" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.nyrsfm">
						<a-date-picker show-time v-model:value="formState.nyrsfm" style="width: 100%"
							valueFormat="YYYY-MM-DD HH:mm:ss" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.shijian">
						<TimePicker placeholder="请选择时间" v-model:value="formState.shijian" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="文件" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.wenjian">
						<JUpload v-model:value="formState.wenjian"></JUpload>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.tupian">
						<JImageUpload :fileMax="2" v-model:value="formState.tupian"></JImageUpload>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="多行文本框" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.dhwb">
						<a-textarea v-model:value="formState.dhwb" rows="4" placeholder="请输入多行文本框" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="字典表下拉搜索框" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.xlss">
						<JSearchSelect v-model:value="formState.xlss" dict="sys_user,realname,username" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="popup弹窗" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.popup">
						<JPopup v-model:value="formState.popup" :fieldConfig="[
                { source: 'name', target: 'popup' },
                { source: 'id', target: 'popback' },
              ]" code="report_user" :multi="true" :setFieldsValue="setFieldsValue" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="popback" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.popback">
						<a-input v-model:value="formState.popback" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="分类字典树" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.flzds">
						<JCategorySelect @change="(value) => handleFormChange('flzds', value)"
							v-model:value="formState.flzds" pcode="B02" placeholder="请选择分类字典树" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="部门选择" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.bmxz">
						<JSelectDept v-model:value="formState.bmxz" :multi="true" type="array" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="用户选择" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yhxz">
						<JSelectUserByDept v-model:value="formState.yhxz" :multi="true" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="富文本" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.fwb">
						<JEditor v-model:value="formState.fwb" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="markdown" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.markdownString">
						<JMarkdownEditor v-model:value="formState.markdownString"></JMarkdownEditor>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="省市区JAreaSelect" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.shq">
						<JAreaSelect v-model:value="formState.shq" placeholder="请输入省市区" />
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="省市区JAreaLinkage" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.jssq">
						<JAreaLinkage v-model:value="formState.jssq" placeholder="请输入省市区" />
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="JInputPop" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.ldzje">
						<JInputPop v-model:value="formState.ldzje" placeholder="请输入JInputPop"
							@change="(value) => handleFormChange('ldzje', value)"></JInputPop>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="JSelectInput" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.ldzjs">
						<JSelectInput v-model:value="formState.ldzjs" placeholder="请选择JSelectInput"
							:options="ldzjsOptions" @change="(value) => handleFormChange('ldzjs', value)">
						</JSelectInput>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="下拉多选" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.zddtjxl">
						<JSelectMultiple v-model:value="formState.zddtjxl" placeholder="请选择下拉多选" dictCode="sex">
						</JSelectMultiple>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="用户" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yongHu">
						<JSelectUser v-model:value="formState.yongHu" placeholder="请选择用户"></JSelectUser>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zhiWu">
						<JSelectPosition v-model:value="formState.zhiWu" placeholder="请选择职务"
							@change="(value) => handleFormChange('zhiWu', value)"></JSelectPosition>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="角色" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jueSe">
						<JSelectRole v-model:value="formState.jueSe" placeholder="请选择角色"
							@change="(value) => handleFormChange('jueSe', value)"></JSelectRole>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="自定义树" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdys">
						<JTreeSelect ref="treeSelect" placeholder="请选择自定义树" v-model:value="formState.zdys"
							dict="sys_category,name,id" pidValue="0" loadTriggleChange>
						</JTreeSelect>
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="数值" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.yuanjia">
						<a-input-number v-model:value="formState.yuanjia" placeholder="请输入double类型"
							style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="输入2到10位的字母" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.ywzz">
						<a-input v-model:value="formState.ywzz" placeholder="请输入2到10位的字母"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="JTreeDict" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.zdbxl">
						<JTreeDict v-model:value="formState.zdbxl" placeholder="请选择JTreeDict"
							@change="(value) => handleFormChange('zdbxl', value)"></JTreeDict>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="JCodeEditor" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.zdmrz">
						<JCodeEditor v-model:value="formState.zdmrz" placeholder="请输入JCodeEditor"
							@change="(value) => handleFormChange('zdmrz', value)"></JCodeEditor>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="参数" :labelCol="labelCol" :wrapperCol="wrapperCol"
						v-bind="validateInfos.jsonParam">
						<JAddInput v-model:value="formState.jsonParam" placeholder="参数"></JAddInput>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-spin>
</template>

<script lang="ts" setup>
	import { ref, reactive, nextTick } from 'vue';
	import { defHttp } from '/@/utils/http/axios';
	import { useMessage } from '/@/hooks/web/useMessage';
	import dayjs from 'dayjs';
	import { TimePicker, Form } from 'ant-design-vue';
	import JCheckbox from '/@/components/Form/src/jeecg/components/JCheckbox.vue';
	import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
	import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
	import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
	import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
	import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
	import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
	import JCategorySelect from '/@/components/Form/src/jeecg/components/JCategorySelect.vue';
	import JSelectUserByDept from '/@/components/Form/src/jeecg/components/JSelectUserByDept.vue';
	import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
	import JMarkdownEditor from '/@/components/Form/src/jeecg/components/JMarkdownEditor.vue';
	import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue';
	import JInputPop from '/@/components/Form/src/jeecg/components/JInputPop.vue';
	import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
	import JSelectPosition from '/@/components/Form/src/jeecg/components/JSelectPosition.vue';
	import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
	import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
	import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
	import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
	import JAreaSelect from '/@/components/Form/src/jeecg/components/JAreaSelect.vue';
	import JAreaLinkage from '/@/components/Form/src/jeecg/components/JAreaLinkage.vue';
	import JSelectRole from '/@/components/Form/src/jeecg/components/JSelectRole.vue';
	import JTreeDict from '/@/components/Form/src/jeecg/components/JTreeDict.vue';
	import JCodeEditor from '/@/components/Form/src/jeecg/components/JCodeEditor.vue';
	import JAddInput from '/@/components/Form/src/jeecg/components/JAddInput.vue';
	import { getValueType } from '/@/utils';

	const emit = defineEmits(['register', 'ok']);
	//update-begin---author:wangshuai ---date:20220616  for：报表示例验证修改--------------
	const formState = reactive<Record<string, any>>({
		name: '',
		miMa: '',
		ywzz: '',
		xiala: '',
		danxuan: '',
		duoxuan: '',
		riqi: '',
		shijian: '',
		wenjian: '',
		tupian: '',
		dhwb: '',
		xlss: '',
		popup: '',
		flzds: '',
		yhxz: '',
		fwb: '',
		shq: '',
		ldzje: '',
		ldzjs: '',
		zddtjxl: '',
		yongHu: '',
		zhiWu: '',
		jueSe: '',
		zdys: '',
		jssq: '',
		zdbxl: '',
		zdmrz: '',
		jsonParam: '',
		bmxz: '',
		yuanjia: '',
		nyrsfm: '',
	});
	//update-end---author:wangshuai ---date:20220616  for：报表示例验证修改--------------
	const { createMessage } = useMessage();
	const formRef = ref();
	const useForm = Form.useForm;
	const url = reactive<any>({
		duplicateCheck: '/sys/duplicate/check',
		add: '/test/jeecgDemo/oneNative/add',
		edit: '/test/jeecgDemo/oneNative/edit',
	});
	const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
	const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
	const confirmLoading = ref<boolean>(false);
	//表单验证
	const validatorRules = {
		name: [{ required: false, message: '请输入文本!' }],
		miMa: [{ required: false, message: '请输入密码!' }],
		ywzz: [{ required: false }, { pattern: '^[a-z|A-Z]{2,10}$', message: '不符合校验规则!' }],
		xiala: [{ required: false, message: '请选择下拉组件!' }],
		danxuan: [{ required: false, message: '请选择单选组件!' }],
		duoxuan: [{ required: false, message: '请选择多选组件!' }],
		riqi: [{ required: false, message: '请选择日期!' }],
		shijian: [{ required: false, message: '请选择时间!' }],
		wenjian: [{ required: false, message: '请上传文件!' }],
		tupian: [{ required: false, message: '请上传图片!' }],
		dhwb: [{ required: false, message: '请填写多行文本!' }],
		xlss: [{ required: false, message: '请选择字典下拉搜索!' }],
		popup: [{ required: false, message: '请选择popup弹窗!' }],
		flzds: [{ required: false, message: '请选择分类字典树!' }],
		yhxz: [{ required: false, message: '请选择用户!' }],
		fwb: [{ required: false, message: '请填写富文本!' }],
		shq: [{ required: false, message: '请选择省市级!' }],
		ldzje: [{ required: false, message: '请输入JInputPop!' }],
		ldzjs: [{ required: false, message: '请选择下拉输入框!' }],
		zddtjxl: [{ required: false, message: '请选择多选输入框!' }],
		yongHu: [{ required: false, message: '请选择用户!' }],
		zhiWu: [{ required: false, message: '请选择职务!' }],
		jueSe: [{ required: false, message: '请选择角色!' }],
		zdys: [{ required: false, message: '请选择自定义树!' }],
		jssq: [{ required: false, message: '请选择三级联动!' }],
		zdbxl: [{ required: false, message: '请选择JTreeDict!' }],
		zdmrz: [{ required: false, message: '请输入JCodeEditor!' }],
		jsonParam: [{ required: false, message: '请输入参数!' }],
		bmxz: [{ required: false, message: '请选择部门!' }],
		yuanjia: [{ required: false, message: '请输入数值!' }],
		nyrsfm: [{ required: false, message: '请选择年月日时分秒!' }],
	};
	//update-begin---author:wangshuai ---date:20220616  for：报表示例验证修改------------
	const { resetFields, validate, validateInfos } = useForm(formState, validatorRules, { immediate: false });
	//update-end---author:wangshuai ---date:20220616  for：报表示例验证修改------------
	const ldzjsOptions = ref([
		{ label: '男', value: '1' },
		{ label: '女', value: '2' },
	]);

	/**
	 * 新增
	 */
	function add() {
		edit({});
	}

	/**
	 * 编辑
	 */
	function edit(record) {
		nextTick(() => {
			resetFields();
			//赋值
			Object.assign(formState, record);
		});
	}

	/**
	 * 提交数据
	 */
	async function submitForm() {
		// 触发表单验证
		//update-begin---author:wangshuai ---date:20220616  for：报表示例验证修改------------
		await validate();
		confirmLoading.value = true;
		let httpurl = '';
		let method = '';
		//时间格式化
		let model = formState;
		if (!model.id) {
			httpurl += url.add;
			method = 'post';
		} else {
			httpurl += url.edit;
			method = 'put';
		}
		//循环数据如果是数组
		for (let data in formState) {
			//如果该数据是数组并且是字符串类型
			if (formState[data] instanceof Array) {
				let valueType = getValueType(formRef.value.getProps, data);
				//如果是字符串类型的需要变成以逗号分割的字符串
				if (valueType === 'string') {
					formState[data] = formState[data].join(',');
				}
			}
		}
		defHttp
			.request(
				{
					url: httpurl,
					params: model,
					method: method,
				},
				{ isTransformResponse: false }
			)
			.then((res) => {
				if (res.success) {
					createMessage.success(res.message);
					emit('ok');
				} else {
					createMessage.warning(res.message);
				}
			})
			.finally(() => {
				confirmLoading.value = false;
			});
		//update-end---author:wangshuai ---date:20220616  for：报表示例验证修改--------------
	}

	/**
	 * popup成功回调事件
	 */
	function popupHandleSuccess(values) {
		Object.assign(formState, values);
	}

	/**
	 *  popup组件值改变事件
	 */
	function setFieldsValue(map) {
		Object.keys(map).map((key) => {
			formState[key] = map[key];
		});
	}

	/**
	 * 值改变事件触发
	 * @param key
	 * @param value
	 */
	function handleFormChange(key, value) {
		formState[key] = value;
	}

	defineExpose({
		add,
		edit,
		submitForm,
	});
</script>

<style lang="less" scoped>
	.antd-modal-form {
		padding: 24px 24px 24px 24px;
	}
</style>